<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#cotainer {
				width: 100%;
				height: 800px;
				display: flex;
				justify-content: center;
			}

			#outDiv {
				width: 600px;
				height: 350px;
				overflow: hidden;
			}

			#div_img {
				width: 1600px;
				height: 600px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			div img {
				width: 100px;
				height: 100px
			}
		</style>
	</head>
	<body>
		<div id="cotainer">
			<div id="outDiv">
				<div id="div_img">
						<img src="img/1.jpeg">
						<img src="img/2.jpeg">
						<img src="img/3.jpeg">
						<img src="img/4.jpeg">
						<img src="img/5.jpeg">
						<img src="img/6.jpeg">
						<img src="img/7.jpeg">
						<img src="img/8.jpeg">
						<img src="img/9.jpeg">
						<img src="img/10.jpeg">
						<img src="img/1.jpeg">
						<img src="img/2.jpeg">
						<img src="img/3.jpeg">
						<img src="img/4.jpeg">
						<img src="img/5.jpeg">
						<img src="img/6.jpeg">
				</div>
			</div>
		</div>
	</body>
	<script>
		var movePx = 0;
		var moveInterval;
		var flag=true;
		var num=0;
		onload = function() {
			moveInterval = setInterval(changeImg, 10)
		}
		document.getElementById("outDiv").onmouseenter=function(){
					clearInterval(moveInterval);
					console.log(moveInterval)
				for(var i=0;i<=moveInterval;i++){
						clearInterval(i);
				}
		}
		
		document.getElementById("outDiv").onmouseleave=function(){
					moveInterval = setInterval(changeImg, 10);
		}
		
		function changeImg(){
			var div_img = document.getElementById("div_img");
			movePx--;
			if(movePx==-1000){
				movePx=0;
			}
			if(movePx%100==0){
				clearInterval(moveInterval);
					console.log(moveInterval)
				for(var i=0;i<=moveInterval;i++){
						clearInterval(i);
				}
				setTimeout(function(){
					moveInterval = setInterval(changeImg, 10)
				},100)
			}
			div_img.style.marginLeft =  movePx+"px";
		}
	</script>
</html>